<template>
  <div>

    <el-dialog title="请设置内容" :visible.sync="close" width="30%" :before-close="handleClose">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >

        <el-form-item label="任务类型" prop="taskModelName">
          <el-input v-model="ruleForm.taskModelName" />
        </el-form-item>
        <el-form-item label="任务说明" prop="Remark">
          <el-input v-model="ruleForm.Remark" type="textarea" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="ruleForm.sort" v-blur type="text" />
        </el-form-item>
        <el-form-item label="是否启用" prop="isValid">
          <el-switch v-model="ruleForm.isValid" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item v-if="!ruleForm.itemId">
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">继续添加</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
const ruleForm = {
  appCode: 'TY',
  taskModelName: '',
  Remark: '',
  sort: '',
  isValid: 1,
  itemId: ''
}
import { rules } from './rules'
import { addTaskModel, modifyTaskModel } from '@/api/task/taskModel'
export default {
  props: {
    close: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      rules: rules,
      ruleForm: Object.assign({}, ruleForm)
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.itemId !== '') {
            modifyTaskModel({ ...this.ruleForm }).then(res => {
              this.$message.success(res.msg)
              this.$parent.searchClick()
            })
          } else {
            addTaskModel({ ...this.ruleForm }).then(res => {
              this.$message.success(res.msg)
              this.$parent.searchClick()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleClose() {
      this.ruleForm = Object.assign({}, ruleForm)
      this.$refs['ruleForm'].resetFields()
      this.$emit('update:close', false)
    }
  }
}
</script>
